<script setup>
import {router} from "../../router/router.js";
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {doGet, doPost, doPut} from "../../util/request.js";
import {showMessage} from "../../util/message.js";
//路由参数对象
const route = useRoute()

//活动对象
const activity = ref({})
//提交表单对象
const userRuleFormRef = ref()
//提交表单验证规则
const FormRules = ref({
  name: [
    { required: true, message: '请输入活动名称', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  cost: [
    { required: true, message: '请输入活动预算', trigger: 'blur' },
    {pattern: /^\d+(\.\d{1,2})?$/, message: '请输正确的预算金额',trigger: 'blur'}

  ],
  activityTime: [
    { required: true, message: '请选择活动时间', trigger: 'blur' },
  ],
  description: [
    { required: true, message: '请输入活动描述', trigger: 'blur' },
    { min: 3, max: 255, message: '长度在 3 到 255 个字符', trigger: 'blur' }
  ]
})

//提交表单
const submit = (fromRef) => {
  if (!fromRef) return
  fromRef.validate((valid)=>{
    if (valid){
      //获取路径参数
      let id = route.params.id;
      //准备参数
      let params = {
        id: id,
        name: activity.value.name,
        cost: activity.value.cost,
        startTime: activity.value.activityTime[0],
        endTime: activity.value.activityTime[1],
        description: activity.value.description
      }
      console.log('提交表单',params)
      if (id){
        //修改
        doPut('/api/activity',params).then(resp => {
          if (resp.data.code === 200) {
            showMessage("修改成功","success")

            //跳转到用户列表页面
            router.back()
          }else {
            showMessage("修改失败"+resp.data.msg,"error")
          }
        })
      }else {
        //新增
        doPost('/api/activity/add',params).then(resp => {
          if (resp.data.code === 200) {
            showMessage("新增成功","success")
            //跳转到用户列表页面
            router.back()
          }else {
            showMessage("新增失败"+resp.data.msg,"error")
          }
        })
      }

    }
  })


  onMounted(()=>{

  })
}
//重置表单
const resetForm = (fromRef) => {
  if (!fromRef) return
  fromRef.resetFields()
}
//查询活动信息
const loadActivityInfo = (id) => {
  doGet('/api/activity/info/'+id,{}).then(resp => {
    if (resp.data.code === 200) {
      activity.value = resp.data.data
      activity.value.activityTime=[activity.value.startTime,activity.value.endTime]
    }else {
      showMessage("查询失败"+resp.data.msg,"error")
    }
  })
}
onMounted(()=>{
  let id = route.params.id;
  console.log(id)
  if (!id) return
  loadActivityInfo(id)
})
</script>

<template>
  <div class="container-ss">
  <h1 v-if="activity.id" style="margin-left: 300px">修改活动</h1>
  <h1 v-else style="margin-left: 300px">添加活动</h1>

  <el-form
      ref="userRuleFormRef"
      style="max-width: 600px;"
      :model="activity"
      label-width="auto"
      :rules="FormRules"
      class="demo-ruleForm">

    <el-form-item label="活动名称" prop="name">
      <el-input v-model="activity.name" />
    </el-form-item>

    <el-form-item label="活动预算" prop="cost">
      <el-input v-model="activity.cost" />
    </el-form-item>

    <el-form-item label="活动时间" prop="activityTime">
      <el-date-picker
          v-model="activity.activityTime"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>



    <el-form-item label="活动描述" prop="description">
      <el-input v-model="activity.description" type="textarea"
      maxlength="255" minlength="3" show-word-limit rows="6"/>
    </el-form-item>


    <el-form-item label=" ">
      <div style="margin-left: 150px">
      <el-button type="primary" @click="submit(userRuleFormRef)">提交</el-button>
      <el-button @click="resetForm(userRuleFormRef)">重置</el-button>
      <el-button @click="router.back()">返回</el-button>
      </div>
    </el-form-item>

  </el-form>
  </div>
</template>

<style scoped>

.container-ss{
  margin-left: 300px;
  margin-top: 100px;
}
</style>